<template>
  <div class="login-container">
    <!-- 
      :model表单数据对象
      :rules表单验证规则
     -->
    <el-form
      :model="user"
      ref="user"
      :rules="loginFormRules"
      class="login-from"
      size="mini"
    >
      <h2 class="login-title">扶贫管理平台</h2>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="user.username" placeholder="长度5-10"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="user.password"></el-input>
      </el-form-item>
      <el-form-item style="text-align: center">
        <el-button type="primary" @click="login">登录</el-button>
        <el-button type="warning" @click="field">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import qs from 'qs'
export default {
  name: "Login",
  data() {
    return {
      user: {
        username: "易烊千玺",
        password: 123456,
        // token: '',
      },
      // loginFormRules 通过rules属性传入约定的验证规则
      loginFormRules: {
        // username 需要被效验的字段名
        username: [
          // 表示当鼠标失去焦点时,验证,必填项,如果为空,就显示message内容
          { required: true, message: "用户名不能为空", trigger: "blur" },
          { min: 4, max: 10, message: "用户名5-10位", trigger: "blur" },
        ],
        password: [
          // 表示当鼠标失去焦点时
          { required: true, message: "密码不能为空", trigger: "blur" },
          { min: 5, max: 10, message: "密码6-12位", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      this.$router.push("/home");
    },
    field() {
      this.$router.push("/regist");
    },
    async login() {
      // let params = new URLSearchParams();
      // params.append("username", this.user.username);
      // params.append("password", this.user.password);
      let { data: res } = await this.$axios.post("/user/login", qs.stringify(this.user));
      // console.log(res.data.user);

      this.$store.commit('LOGINNAME',res.data.user)
      // console.log(res.data.user);

      if (res.code == 200) {
        this.$message.success("登陆成功");
        window.sessionStorage.setItem("token", res.data.token);
        this.$router.push("/home");
      } else {
        this.$message.error("登陆失败");
      }
    },
  },
 
};
</script>

 <style lang="scss" scoped>
.login-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}
.login-from {
  margin: 150px auto;
  width: 25%;
  background-image: linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%);
  border-radius: 10px;
  padding: 20px;
}
.login-title {
  color: rgb(62, 65, 60);
  text-align: center;
}
.el-form-item {
  padding: 0px;
}
</style>